<template>
    <div class="finance">
        <!-- 财务数据开始 -->
        <yn-com-comTitle name="财务数据"></yn-com-comTitle>
        <div class="table">
            <div class="tableTab">
                <span
                    class="tableBtn"
                    :class="{ on: index == tabIndex }"
                    v-for="(item, index) in tabArr"
                    :key="index"
                    @click="onTab(item, index)"
                    >{{ item }}</span
                >
            </div>
        </div>
        <tab-1 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 0"></tab-1>
        <tab-2 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 1"></tab-2>
        <tab-3 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 2"></tab-3>
        <tab-4 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 3"></tab-4>
        <tab-5 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 4"></tab-5>
        <tab-6 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 5"></tab-6>
        <tab-7 :tabList="tabList" @onTime="onTime" v-if="tabIndex == 6"></tab-7>
        <tab-8 v-if="tabIndex == 7" ref="tab8"></tab-8>
        <tab-9 v-if="tabIndex == 8"></tab-9>
        <tab-10 v-if="tabIndex == 9" ref="tab10"></tab-10>
        <!-- 财务数据结束 -->
        <!-- 财务结构 -->
        <yn-com-comTitle name="财务结构" class="mt15"></yn-com-comTitle>
        <tab-9 type="caiwu"></tab-9>
        <!-- 财务结构 -->
    </div>
</template>

<script>
import { Loading } from "element-ui";

import tab1 from "./tab-1.vue";
import tab2 from "./tab-2.vue";
import tab3 from "./tab-3.vue";
import tab4 from "./tab-4.vue";
import tab5 from "./tab-5.vue";
import tab6 from "./tab-6.vue";
import tab7 from "./tab-7.vue";
import tab8 from "./tab-8.vue";
import tab9 from "./tab-9.vue";
import tab10 from "./tab-10.vue";
const href = window.location.href;
const stock = href.match(/stock=(\w+)/);
import { finance, finList } from "../../script/api";
export default {
    components: { tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8, tab9, tab10 },
    data() {
        return {
            tabIndex: 0,
            tabArr: [
                "主要指标",
                "每股指标",
                "成长能力",
                "盈利能力",
                "现金流量",
                "偿债能力",
                "运营能力",
                "资产负债表",
                "利润表",
                "现金流量表",
            ],
            tabList: [
                {
                    finished: false,
                    list: [],
                },
                {
                    finished: false,
                    list: [],
                },
                {
                    finished: false,
                    list: [],
                },
            ],
            listDta: [],
            stockCode: "",
        };
    },
    mounted() {
        let stockCode = stock[1] || "";
        if (stockCode.length > 6) {
            this.stockCode = stockCode.substring(2);
        } else {
            this.stockCode = stockCode;
        }
        this.init();
    },
    methods: {
        async init() {
            await finList({ stockCode: this.stockCode }).then((res) => {
                this.tabList[0].finished = true;
                this.tabList[0].list = res.data;
            });
        },
        onTab(item, index) {
            console.log(1111, index);
            this.tabIndex = index;
            if (index == 7) return;
            if (index == 8) return;
            if (index == 9) return;
            this.init();
        },
        async onTime(key, index) {
            console.log(11111111111, key, index);
            let stockCode = this.stockCode;
            await finList({ stockCode, interval: key }).then((res) => {
                this.tabList[index].list = res.data;
                this.tabList[index].finished = true;
                this.timeIdx = index;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>
<style>
.active_Row {
    background: #2d3245 !important;
}
.tab_box_fiance {
    display: flex;
    justify-content: center;
    height: 55px;
    align-items:center;
    background: #27282e;
    border-bottom: 1px solid #000000;
    /* border-top: 1px solid #000000; */
    margin:0px !important;
   
}

.tab_box_fiance .tableBtn{
    margin-top:0px;
}
</style>

